<template>
<div class="item">
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in imgwrap" :key="item.url">
      <img :src="item.url" object-fit="cover" />
    </el-carousel-item>
  </el-carousel>
</div>

<div class="log">
  写日志
</div>

<div class="log">
  
  我的相册
</div>


<div class="post">

  <NoteList />
</div>
  
</template>

<script>
import NoteList from "@/views/Space/NoteList/NoteList.vue";

export default {
  name: 'Family',
  components: {
    NoteList,
  },
  data() {
    return {
      imgwrap: [
        { url: require("@/assets/ju.png") },
        { url: require("@/assets/3.png") },
        { url: require("@/assets/4.png") },
        { url: require("@/assets/5.png") },
      ],
    };
  },

}
</script>

<style>
 .el-carousel__item h3 {
    color: #409147;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #92eb86;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3e6d5;
  }
  .item{
    float: left;
    width: 800px;
    height: 300px;
    margin-left: 30px;
    margin-top: 30px;
    padding: 30px;
  }
  .log{
    float: right;
    border:2px solid#ffff;
    width: 350px;
    height: 135px;
    margin-right: 30px;
    margin-top: 30px; /**/
    font-family: cursive;/*字体为草书*/
    font-size: 50px;
    color: #ffff;
    text-align: center;  /**/
    line-height: 135px;  /*文字行高设置的与盒子高度一样，使文字垂直居中*/
  }
  .post{
  border-top: 2px solid#ffff;
  width: 100%;
	height: 300px;
  margin-top:400px;
  background-color: #a3d4aa;
     
  }
</style>